<template>
  <div class="change-password">
    <Form class="form" ref="form">
      <CellGroup inset class="cell-group">
        <Field name="oldPassword"
          v-model="params.oldPassword"
          :type="(passwordType.oldPassword as any)"
          :right-icon="rightIcon.oldPassword"
          @click-right-icon="showOldPassword = !showOldPassword"
          label="旧密码" placeholder="请输入旧密码" :rules="[
            { required: true, message: '请填写旧密码' },
            {
              pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,16}$/,
              message: '密码必须包含大小写字母和数字，长度在6-16之间'
            }
          ]" />
        <Field name="newPassword"
          v-model="params.newPassword"
          :type="(passwordType.newPassword as any)"
          :right-icon="rightIcon.newPassword"
          @click-right-icon="showNewPassword = !showNewPassword"
          label="新密码" placeholder="请输入新密码" :rules="[
            { required: true, message: '请填写新密码' },
            {
              pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,16}$/,
              message: '密码必须包含字母和数字，长度在8-16之间'
            }
          ]" />
        <Field name="confirmPassword"
          v-model="params.confirmPassword"
          :type="(passwordType.confirmPassword as any)"
          :right-icon="rightIcon.confirmPassword"
          @click-right-icon="showConfirmPassword = !showConfirmPassword"
          label="确认密码" placeholder="请再次输入新密码"
          :rules="[
            { required: true, message: '请填写确认密码' },
            {
              pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,16}$/,
              message: '密码必须包含字母和数字，长度在8-16之间'
            }
          ]" />
      </CellGroup>
    </Form>
    <div class="btn">
      <Button type="primary" block round
        @click="handleChange">确认修改</Button>
    </div>
  </div>
</template>
<script setup lang="ts">
import {
  Button, CellGroup, Field, Form,
} from 'vant';
import { computed, ref } from 'vue';

import useChangePassword from '../hooks/useChangePassword';

const {
  form, params, handleChange,
} = useChangePassword();

const showOldPassword = ref(false);
const showNewPassword = ref(false);
const showConfirmPassword = ref(false);
const rightIcon = computed(() => ({
  oldPassword: showOldPassword.value ? 'eye-o' : 'closed-eye',
  newPassword: showNewPassword.value ? 'eye-o' : 'closed-eye',
  confirmPassword: showConfirmPassword.value ? 'eye-o' : 'closed-eye',
}));

const passwordType = computed(() => ({
  oldPassword: showOldPassword.value ? 'text' : 'password',
  newPassword: showNewPassword.value ? 'text' : 'password',
  confirmPassword: showConfirmPassword.value ? 'text' : 'password',
}));
</script>
<style lang="less" scoped>
.change-password {
  height: 100%;
  display: flex;
  flex-direction: column;

  .btn {
    margin: 16px;
  }
}
</style>
